<!-- 创建时间: 2019年10月13日 星期天 01:31 地图和地图查询组件 -->
<template>
    <div class="map_container">
        <!-- 百度地图 -->
        <div id="allmap"></div>

        <!-- 地址信息及地址查询 -->
        <div class="addressInfo" v-cloak>
            <label for="address" class="mui-icon mui-icon-map">您当前的位置:</label>
            <span id="address" v-text="CurrentAddress"></span>
            <div class="mui-content">
                <div class="mui-row">
                    <div class="mui-col-sm-10 mui-col-xs-12" style="padding-right:10px;">
                        <div class="mui-input-row mui-search">
                            <input
                                type="search"
                                v-model="address"
                                class="mui-input-clear"
                                placeholder
                                @keydown="search"
                            />
                            <span class="mui-icon mui-icon-clear mui-hidden"></span>
                            <span class="mui-placeholder">
                                <span class="mui-icon mui-icon-search"></span>
                                <span></span>
                            </span>
                        </div>
                    </div>
                    <div class="mui-col-sm-2 mui-col-xs-12">
                        <button
                            type="button"
                            class="mui-btn mui-btn-outlined mui-btn-block"
                            @click="query"
                        >查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { MP } from "./map.js";
import mui from "../../lib/MUI/dist/js/mui.js";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            CurrentAddress: "", //地图初始化时，当前的定位信息
            address: "", //用户输入的定位地址
            queryFun: "", //用户点击查询按钮触发事件
            map: ""
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        CurrentAddress(newadd, oldadd) {
            this.getCubeInfo(newadd);
        },
    },
    //方法集合
    methods: {
        query() {
            this.queryFun();
        },
        search(ev) {
            if (ev.keyCode == 13) {
                this.query();
            }
        },
        getCubeInfo(address) {
            this.$store.commit('setAddress',address);
            this.$http
                .get("", { params: { address: address, start: 0 } })
                .then(response => {
                    if (response.body == "") this.map.clearOverlays();
                    this.$store.commit("setCube", response.body);
                });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.$nextTick(function() {
            var _this = this;
            MP().then(BMap => {
                // 百度地图API功能
                var map = new BMap.Map("allmap"); // 创建地图实例
                // var point = new BMap.Point(116.331398, 39.897445);//定位北京
                var point = new BMap.Point(104.635667, 28.773989);//定位宜宾
                
                var geolocation = new BMap.Geolocation();
                _this.map = map;
                // 开启SDK辅助定位
                geolocation.enableSDKLocation();
                geolocation.getCurrentPosition(
                    function(r) {
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                            var point = new BMap.Point(
                                r.point.lng,
                                r.point.lat
                            ); // 创建点坐标
                            map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
                            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                            _this.CurrentAddress = r.address.city;
                            addMarker(point);
                            randPoint();
                        } else {
                            alert("failed" + this.getStatus());
                        }
                    },
                    { enableHighAccuracy: true }
                );

                // ***********************地图中获取当前位置信息*******************************
                var geolocationControl = new BMap.GeolocationControl();
                geolocationControl.addEventListener("locationSuccess", function(e) {
                    // 定位成功事件
                    // console.log("当前定位地址为：");
                    // console.log(address);
                    _this.CurrentAddress = e.addressComponent.city;
                    _this.address = e.addressComponent.city;
                    _this.queryFun();
                });
                geolocationControl.addEventListener("locationError", function(e) {
                    // 定位失败事件
                    alert(e.message);
                });

                // *************************用户自定义查询城市*****************************
                _this.queryFun = function theLocation() {
                    map.clearOverlays(); //清除标点
                    var city = _this.address;
                    if (city != "") {
                        //map.centerAndZoom(city, 12); // 用城市名设置地图中心点
                        // 创建地址解析器实例
                        var myGeo = new BMap.Geocoder();
                        // 将地址解析结果显示在地图上,并调整地图视野
                        myGeo.getPoint(
                            city,
                            function(point) {
                                if (point) {
                                    map.centerAndZoom(point, 12);
                                    console.log("用户自定义查询城市:",point);
                                    var marker = new BMap.Marker(point);
                                    map.addOverlay(marker);
                                    _this.getCubeInfo(_this.address);
                                    _this.address = "";
                                    randPoint();
                                } else {
                                    alert("您选择地址没有解析到结果!");
                                }
                            },
                            city
                        );
                    }
                };
                // ******************************************************

                // *************************地图控件的添加*****************************
                var top_left_control = new BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT
                }); // 左上角，添加比例尺
                var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
                /*缩放控件type有四种类型:
                    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
                    BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
                    BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
                map.addControl(top_left_control);
                map.addControl(top_left_navigation);
                // ******************************************************

                map.addControl(geolocationControl);
                // ******************************************************

                // *************************编写自定义函数,创建标注*****************************
                function addMarker(point) {
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    map.panTo(point);
                }
                // 随机向地图添加25个标注
                function randPoint() {
                    var bounds = map.getBounds();
                    var sw = bounds.getSouthWest();
                    var ne = bounds.getNorthEast();
                    var lngSpan = Math.abs(sw.lng - ne.lng);
                    var latSpan = Math.abs(ne.lat - sw.lat);
                    for (var i = 0; i < 25; i++) {
                        var point = new BMap.Point(
                            sw.lng + lngSpan * (Math.random() * 0.7),
                            ne.lat - latSpan * (Math.random() * 0.7)
                        );
                        addMarker(point);
                    }
                }
                // ******************************************************
            }); // ************************底部******************************
        });

        mui(".mui-input-row input").input();
    }
};
</script>


<style lang='scss' scoped>
//@import url(); 引入公共css类
.map_container {
    #allmap {
        margin-top: 45px;
        height: 250px;
    }
    .addressInfo {
        margin-top: 5px;
        padding: 0px 10px;
        [v-cloak] {
            display: none;
        }
        label,
        #address {
            font-size: 20px;
        }
    }
}
.mui-btn-block {
    font-size: 18px;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 4px 0;
}
.mui-content {
    background-color: #fff;
}
</style>